<template>
  <!-- 用户中心 -->
  <div style="height: 100%">
    <el-card class="box-card" :body-style="{'line-height':'69px'}">
      <div style="text-align: left;">
        <span style="font-weight: 600; font-size: 28px" @click="toHome">LOGO</span>
        &nbsp;&nbsp;个人中心
      </div>
    </el-card>
    <el-card class="box-card" :body-style="{background:'#FFFFFF'}">
      <el-container style="height: 577px; border: 1px solid #eee; width: 1200px; margin: auto">

        <!-- 左侧导航 -->
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <el-menu default-active="1">
            <el-menu-item index="1">
              <i class="el-icon-user"></i>
              <span slot="title">基本信息</span>
            </el-menu-item>
            <el-menu-item index="2">
              <i class="el-icon-s-order"></i>
              <span slot="title">我的订单</span>
            </el-menu-item>
            <el-menu-item index="3">
              <i class="el-icon-star-off"></i>
              <span slot="title">我的收藏</span>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-money"></i>
              <span slot="title">红包卡卷</span>
            </el-menu-item>
            <el-menu-item index="5">
              <i class="el-icon-setting"></i>
              <span slot="title">设置中心</span>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <!-- 内容区域 -->
        <el-container>
          <el-main>

            <el-tabs v-model="activeName" @tab-click="handleClick">

              <el-tab-pane label="个人信息" name="basicInfo">
                <el-descriptions :column="1">
                  <el-descriptions-item label="头像">
                    <el-avatar :size="80"
                               src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                  </el-descriptions-item>
                  <el-descriptions-item label="用户名">Admin</el-descriptions-item>
                  <el-descriptions-item label="手机号">18812340000</el-descriptions-item>
                  <el-descriptions-item label="生日">2021-11-11</el-descriptions-item>
                  <el-descriptions-item label="积分">898</el-descriptions-item>
                  <el-descriptions-item label="等级">
                    <el-tag size="small">V8</el-tag>
                  </el-descriptions-item>
                </el-descriptions>
              </el-tab-pane>

              <el-tab-pane label="修改密码" name="updatePass" style="margin: auto">
                <el-form :model="updatePassForm" status-icon :rules="rules" ref="updatePassForm"
                         label-width="100px" class="demo-ruleForm" style="width: 400px;">
                  <el-form-item label="旧密码" prop="oldPass" style="width: 300px;">
                    <el-input v-model.number="updatePassForm.oldPass"></el-input>
                  </el-form-item>
                  <el-form-item label="新密码" prop="newPass" style="width: 300px;">
                    <el-input type="password" v-model="updatePassForm.newPass" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="确认密码" prop="checkPass" style="width: 300px;">
                    <el-input type="password" v-model="updatePassForm.checkPass" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button @click="resetForm('updatePassForm')">重置</el-button>
                    <el-button type="primary" @click="submitForm('updatePassForm')">提交</el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>

              <el-tab-pane label="收货地址" name="myAddress">
                <el-table :data="tableData">
                  <el-table-column prop="consignee" label="收货人" width="100"></el-table-column>
                  <el-table-column prop="phoneNum" label="手机号码" width="120"></el-table-column>
                  <el-table-column prop="address" label="所在地区"></el-table-column>
                  <el-table-column prop="details" label="详细地址"></el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </el-main>
        </el-container>

      </el-container>
    </el-card>

    <!-- 公共底部 -->
    <my-footer></my-footer>
  </div>
</template>

<script>
  export default {
    name: "userCenter",
    // 方法区
    methods: {

      // 修改密码提交/重置
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },

      // 标签切换
      handleClick(tab, event) {
        console.log(tab, event);
      },

      // 去首页
      toHome() {
        this.$router.push('/home');
      }
    },

    // 数据区
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.updatePassForm.newPass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      const item = {
        consignee: '曹孟德',
        phoneNum: '18812340000',
        address: '河南省 郑州市 金水区',
        details: '玉米楼1902'
      };
      return {

        // 收货地址
        tableData: Array(5).fill(item),

        // 左侧默认选中
        activeIndex: '1',

        // 标签默认选中
        activeName: 'basicInfo',

        // 控制 个人中心 导航栏 对应的 内容区
        basicInfo: true,
        updatePass: false,
        myAddress: false,

        // 修改密码表单
        updatePassForm: {
          oldPass: '',
          newPass: '',
          checkPass: ''
        },
        rules: {
          oldPass: [
            {required: true, message: '请输入旧密码', trigger: 'blur'}
          ],
          newPass: [
            {required: true, message: '请输入新密码', trigger: 'blur'},
            {validator: validatePass, trigger: 'blur'}
          ],
          checkPass: [
            {required: true, message: '请确认新密码', trigger: 'blur'},
            {validator: validatePass2, trigger: 'blur'}
          ]
        }
      }
    }
  }
</script>

<style scoped>

</style>
